//螺旋运动
function screw() {
    var oDiv = document.getElementById('screw');
    var r = 0; //半径
    var x = document.body.clientWidth / 2; //原点坐标x
    var y = document.body.clientHeight / 2; //原点坐标y
    var color = [0, 0, 0]; //移动点背景色
    var _flag = false;
    var _s = false;
    var num = 0;


    setInterval(function() {

        if (x * 2 - oDiv.offsetLeft < x / 3) {
            _s = true
        }
        if (!_s) {
            num++; //角度递增
        } else {
            num--
            if (num == 1) {
                _s = false
            }
        }
        r += 0.1; //半径递增

        //循环生成颜色
        if (!_flag) {
            if (color[0] < 255) {
                color[0]++;
            } else if (color[1] < 255) {
                color[1]++;
            } else if (color[2] < 255) {
                color[2]++;
                if (color[2] == 255) {
                    _flag = true;
                }
            }
        } else {
            if (color[0] > 0) {
                color[0]--;
            } else if (color[1] > 0) {
                color[1]--;
            } else if (color[2] > 0) {
                color[2]--;
                if (color[2] == 0) {
                    _flag = false;
                }
            }
        }

        //Math.sin( num*Math.PI/180 ) = a/r;
        //Math.cos( num*Math.PI/180 ) = b/r;

        var a = Math.sin(num * Math.PI / 180) * r / 2; //移动点x坐标
        var b = Math.cos(num * Math.PI / 180) * r / 2; //移动点y坐标

        //设置移动点属性
        oDiv.style.left = x + b + 'px';
        oDiv.style.top = y + a + 'px';

        var oBox = document.createElement('screw');
        oBox.className = 'box';
        if (!_s) {
            document.body.appendChild(oBox);
            console.log(document.getElementsByClassName('box').length);
            console.log(num);
        } else {
            console.log(document.getElementsByClassName('box').length);
            console.log(num);
            document.getElementsByClassName('box')[num - 1].remove();
        }

        oBox.style.left = oDiv.offsetLeft + 'px';
        oBox.style.top = oDiv.offsetTop + 'px';
        oBox.style.background = 'rgb(' + color.toString() + ')';
        //document.getElementsByTagName("body")[0].style.background = 'rgb(' + color.toString() + ')';

    }, 30);

};


//圆形运动
function circle() {
    var oDiv = document.getElementById('circle');
    var r = 10; //半径
    var x = 20; //原点坐标x
    var y = 20; //原点坐标y
    var num = 0;
    var color = [0, 0, 0]; //移动点背景色

    setInterval(function() {

        num++; //角度递增

        var a = Math.sin(num * Math.PI / 180) * r / 2; //移动点x坐标
        var b = Math.cos(num * Math.PI / 180) * r / 2; //移动点y坐标

        //设置移动点属性
        oDiv.style.left = x + b + 'px';
        oDiv.style.top = y + a + 'px';

        var oBox = document.createElement('circle');
        oBox.className = 'box';
        //document.body.appendChild(oBox);

        oBox.style.left = oDiv.offsetLeft + 'px';
        oBox.style.top = oDiv.offsetTop + 'px';
        oBox.style.background = 'rgb(' + color.toString() + ')';

    }, 30);

};

//三维
function threeDimensional() {
    var oDiv = document.getElementById('threeDimensional');
    var r = 100;
    var x = 700;
    var y = 300;

    var num = 0;

    setInterval(function() {

        num++

        //Math.sin( num*Math.PI/180 ) = a/r;
        //Math.cos( num*Math.PI/180 ) = b/r;

        var a = Math.sin(num * Math.PI / 180) * r;
        var b = Math.cos(num * Math.PI / 180) * r;

        oDiv.style.left = x + b + 'px';
        //oDiv.style.top = y + a + 'px';

        oDiv.style.width = a / 100 * 30 + 50 + 'px';
        oDiv.style.height = a / 100 * 30 + 50 + 'px';


        /*var oBox = document.createElement('div');
        oBox.className = 'box';
        document.body.appendChild( oBox );
        oBox.style.left = oDiv.offsetLeft + 'px';
        oBox.style.top = oDiv.offsetTop + 'px';*/

    }, 30);

};


//曲线
function curve() {
    var oDiv = document.getElementById('curve');
    var num = 0;
    var val = 10; //扩大系数

    var L = 100;
    var T = 100;

    //弧度控制 : left
    //sin控制 : top

    setInterval(function() {

        num++;

        if (document.body.clientWidth - (num * Math.PI / 180) * val < 2 * L) {
            T = 200;
            num = 0;
        }
        oDiv.style.left = L + (num * Math.PI / 180) * val + 'px';
        // 为什么要减呢 因为sin是初始化时是向上走的，top值小就向上嘛
        oDiv.style.top = T - Math.sin(num * Math.PI / 180) * val + 'px';

        var oBox = document.createElement('curve');
        oBox.className = 'curve';
        document.body.appendChild(oBox);
        oBox.style.left = oDiv.offsetLeft + 'px';
        oBox.style.top = oDiv.offsetTop + 'px';

    }, 30);

};
(function() {
    //螺旋运动
    screw();
    //圆形运动
    circle();
    //三维
    threeDimensional();
    //曲线
    curve();

})()